<template>
    <div class="data-io">
      <!-- 导入导出按钮组 -->
      <div class="button-group">
        <el-upload
          class="upload-excel"
          :action="''"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleFileChange"
          accept=".xlsx,.xls"
        >
          <el-button size="small" type="primary">
            <i class="el-icon-upload2"></i> 导入Excel
          </el-button>
        </el-upload>
  
        <el-button 
          size="small" 
          type="success" 
          @click="handleExportExcel"
        >
          <i class="el-icon-download"></i> 导出Excel
        </el-button>
  
        <el-button 
          size="small" 
          type="warning" 
          @click="handleExportPDF"
        >
          <i class="el-icon-document"></i> 导出PDF
        </el-button>
  
        <el-button 
          size="small" 
          type="info" 
          @click="handleDownloadTemplate"
        >
          <i class="el-icon-document-copy"></i> 下载模板
        </el-button>
      </div>
  
      <!-- 导入预览对话框 -->
      <el-dialog
        title="导入预览"
        :visible.sync="previewVisible"
        width="70%"
      >
        <el-table
          v-if="previewData.length > 0"
          :data="previewData"
          border
          style="width: 100%"
        >
          <el-table-column
            v-for="(col, index) in columns"
            :key="index"
            :prop="col.prop"
            :label="col.label"
          />
        </el-table>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="previewVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmImport">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { exportExcel, importExcel, exportPDF, downloadTemplate } from '@/utils/export'
  
  export default {
    name: 'DataIO',
    props: {
      // 数据列配置
      columns: {
        type: Array,
        required: true,
        // [{ prop: 'name', label: '姓名' }]
      },
      // 导出数据
      data: {
        type: Array,
        required: true
      },
      // 文件名
      fileName: {
        type: String,
        default: 'export'
      },
      // PDF导出配置
      pdfOptions: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        previewVisible: false,
        previewData: []
      }
    },
    computed: {
      headers() {
        return this.columns.map(col => col.label)
      },
      props() {
        return this.columns.map(col => col.prop)
      }
    },
    methods: {
      // 处理文件选择
      async handleFileChange(file) {
        try {
          this.previewData = await importExcel(file.raw)
          this.previewVisible = true
        } catch (error) {
          this.$message.error('文件解析失败：' + error.message)
        }
      },
      // 确认导入
      confirmImport() {
        this.$emit('import', this.previewData)
        this.previewVisible = false
        this.previewData = []
      },
      // 导出Excel
      handleExportExcel() {
        try {
          exportExcel(this.data, this.props, this.fileName)
          this.$message.success('导出成功')
        } catch (error) {
          this.$message.error('导出失败：' + error.message)
        }
      },
      // 导出PDF
      handleExportPDF() {
        try {
          exportPDF(this.data, this.columns, this.fileName, this.pdfOptions)
          this.$message.success('导出成功')
        } catch (error) {
          this.$message.error('导出失败：' + error.message)
        }
      },
      // 下载模板
      handleDownloadTemplate() {
        try {
          downloadTemplate(this.headers, this.fileName)
          this.$message.success('模板下载成功')
        } catch (error) {
          this.$message.error('模板下载失败：' + error.message)
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .data-io {
    .button-group {
      margin-bottom: 15px;
      display: flex;
      gap: 10px;
      
      .upload-excel {
        display: inline-block;
      }
    }
  }
  </style>